{% extends 'nofooter-base.html' %}
{% load staticfiles %}
{% block custom_content %}

    <header class="detail-header fixed-header">
        <a href="javascript:history.go(-1)"><img src="{% static 'images/detail-left.png' %}"/></a>

        <a href="shopcar.html" class="right"><img src="{% static 'images/shopbar.png' %}"/></a>
    </header>


    <div class="contaniner fixed-contb">
        <section class="detail">
            <figure class="swiper-container">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide">
                        <a href="#">
                            <img src="{{ MEDIA_URL }}{{ goods.image }}"/>
                        </a>
                    </li>

                </ul>
                <div class="swiper-pagination">
                </div>
            </figure>
            <dl class="jiage">
                <dt>
                <h3>{{ goods.name }}</h3>
                <div class="collect">
                    <img src="{% static 'images/detail-heart-hei.png' %}"/>
                    <p>收藏</p>
                </div>
                </dt>
                <dd>
                    <b>￥{{ goods.price }}</b>
                    <del>￥{{ goods.market_price }}</del>
                    <input type="button" value="￥10.00" readonly/>
                    <small>+356积分</small>
                </dd>
            </dl>


            <a href="#" class="seven">
                <b>7</b>天无理由退换货
                <span id="sss"></span>
            </a>

            {#            <ul class="same">#}
            {#                <a href="#">#}
            {#					<span>#}
            {#						同类推荐#}
            {#					</span>#}
            {#                    <li class="one">#}
            {#                        <img src="images/detail-pp01.png"/>#}
            {#                        <p>￥188.00</p>#}
            {#                    </li>#}
            {#                    <li>#}
            {#                        <img src="images/detail-pp02.png"/>#}
            {#                        <p>￥188.00</p>#}
            {#                    </li>#}
            {#                    <li>#}
            {#                        <img src="images/detail-pp03.png"/>#}
            {#                        <p>￥188.00</p>#}
            {#                    </li>#}
            {#                    <li>#}
            {#                        <img src="images/detail-pp04.png"/>#}
            {#                        <p>￥188.00</p>#}
            {#                    </li>#}
            {#                </a>#}
            {#            </ul>#}

            <article class="detail-article">
                <nav>
                    <ul class="article">
                        <li id="talkbox1" class="article-active">商品详情</li>
                        <li id="talkbox2">评价</li>
                    </ul>
                </nav>

                <section class="talkbox1">
                    {{ goods.details |safe }}
                </section>

                <section class="talkbox2" style="display: none;">
                    <ul class="talk">
                        <li>
                            <figure><img src="images/detail-tou.png"/></figure>
                            <dl>
                                <dt>
                                <p>瑾晨</p>
                                <time>2015.11.17</time>
                                <div class="star">
                                    <span><img src="images/detail-iocn01.png"/></span>
                                    <span><img src="images/detail-iocn01.png"/></span>
                                    <span><img src="images/detail-iocn01.png"/></span>
                                    <span><img src="images/detail-iocn001.png"/></span>
                                    <span><img src="images/detail-iocn001.png"/></span>
                                </div>
                                </dt>
                                <dd>哎哟不错哦，很性感哦！</dd>
                                <small>颜色：豹纹凯特</small>
                            </dl>
                        </li>
                        <li>
                            <figure><img src="images/detail-tou.png"/></figure>
                            <dl>
                                <dt>
                                <p>瑾晨</p>
                                <time>2015.11.17</time>
                                <div class="star">
                                    <span><img src="images/detail-iocn01.png"/></span>
                                    <span><img src="images/detail-iocn01.png"/></span>
                                    <span><img src="images/detail-iocn01.png"/></span>
                                    <span><img src="images/detail-iocn001.png"/></span>
                                    <span><img src="images/detail-iocn001.png"/></span>
                                </div>
                                </dt>
                                <dd>哎哟不错哦，很性感哦！</dd>
                                <small>颜色：豹纹凯特</small>
                                <div class="picbox">
                                    <img src="images/detail-pp01.png"/>
                                    <img src="images/detail-pp02.png"/>
                                    <img src="images/detail-pp03.png"/>
                                    <img src="images/detail-pp04.png"/>
                                </div>
                            </dl>
                        </li>
                        <li>
                            <figure><img src="images/detail-tou.png"/></figure>
                            <dl>
                                <dt>
                                <p>瑾晨</p>
                                <time>2015.11.17</time>
                                <div class="star">
                                    <span><img src="images/detail-iocn01.png"/></span>
                                    <span><img src="images/detail-iocn01.png"/></span>
                                    <span><img src="images/detail-iocn01.png"/></span>
                                    <span><img src="images/detail-iocn001.png"/></span>
                                    <span><img src="images/detail-iocn001.png"/></span>
                                </div>
                                </dt>
                                <dd>哎哟不错哦，很性感哦！</dd>
                                <small>颜色：豹纹凯特</small>
                            </dl>
                        </li>
                        <li>
                            <figure><img src="images/detail-tou.png"/></figure>
                            <dl>
                                <dt>
                                <p>瑾晨</p>
                                <time>2015.11.17</time>
                                <div class="star">
                                    <span><img src="images/detail-iocn01.png"/></span>
                                    <span><img src="images/detail-iocn01.png"/></span>
                                    <span><img src="images/detail-iocn01.png"/></span>
                                    <span><img src="images/detail-iocn001.png"/></span>
                                    <span><img src="images/detail-iocn001.png"/></span>
                                </div>
                                </dt>
                                <dd>哎哟不错哦，很性感哦！</dd>
                                <small>颜色：豹纹凯特</small>
                                <div class="picbox">
                                    <img src="images/detail-pp01.png"/>
                                    <img src="images/detail-pp02.png"/>
                                    <img src="images/detail-pp03.png"/>
                                    <img src="images/detail-pp04.png"/>
                                </div>
                            </dl>
                        </li>
                    </ul>
                </section>

            </article>
        </section>
    </div>


    <footer class="detail-footer fixed-footer">
        <a href="#" class="go-car">
            <input type="button" value="加入购物车"/>
        </a>
        <a href="buy.html" class="buy">
            立即购买
        </a>
    </footer>

    <script type="text/javascript">
      $(function () {
            $('.article li').click(function () {

                $(this).addClass('article-active').siblings().removeClass('article-active');
                if ($(this).attr("id") == "talkbox1") {
                    $('.talkbox1').show();
                    $('.talkbox2').hide();
                } else {
                    $('.talkbox2').show();
                    $('.talkbox1').hide();
                }

            });
        })
    </script>

{% endblock %}